<template>
  <div id="editBlog">
    <!-- 头部区域 -->
    <header>
      <span class="title">文章标题</span>
      <el-input
        type="text"
        placeholder="请输入标题"
        v-model="blog.title"
        maxlength="20"
        show-word-limit
      >
      </el-input>
      <el-button type="danger" class="submitBtn" @click="submitBtnClick"
        >发布文章</el-button
      >
    </header>
    <!-- 文章主体 -->
    <mavon-editor class="mavon-editor" v-model="blog.content"></mavon-editor>

    <!-- 额外信息Dialog -->
    <el-dialog width="550px" title="发布文章" :visible.sync="dialogFormVisible">
      <el-form size="small" ref="form" label-width="80px">
        <el-form-item label="文章分类">
          <el-select v-model="blog.categoryId" placeholder="请选择文章分类">
            <el-option
              v-for="item in categories"
              :key="item.categoryId"
              :label="item.title"
              :value="item.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章标签">
          <el-select v-model="tagIds" multiple placeholder="请选择文章标签">
            <el-option
              v-for="item in tags"
              :key="item.value"
              :label="item.name"
              :value="item.tagId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章标题">
          <el-input v-model="blog.title"></el-input>
        </el-form-item>
        <el-form-item label="文章描述">
          <el-input autosize type="textarea" v-model="blog.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="dialogFormVisible = false">取 消</el-button>
        <el-button plain type="primary" @click="submitBlog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BlogEdit",
  data() {
    return {
      tags: [], // 全部标签组
      categories: [], // 全部分类组
      blog: {}, // 博客对象
      dialogFormVisible: false, // 对话框显示
      tagIds: [] // 当前博客分类id组
    };
  },
  methods: {
    /**
     * 获取所有分类
     */
    async getAllCategory() {
      const { data: res } = await this.$api.category.getAllCategory();
      this.categories = res.data;
      console.log(res);
    },
    /**
     * 获取所有标签
     */
    async getAllTag() {
      const { data: res } = await this.$api.tag.getAllTag();
      this.tags = res.data;
      console.log(res);
    },
    /**
     * 点击发布文章按钮
     */
    async submitBtnClick() {
      this.getAllCategory();
      this.getAllTag();
      this.dialogFormVisible = true;
    },
    /**
     * 提交创建博客
     */
    async submitBlog() {
      // 1.创建博客
      const blog = {
        title: this.blog.title,
        content: this.blog.content,
        desc: this.blog.desc
      };
      const { data: res } = await this.$api.blog.create(blog);
      console.log(res);
      this.blog.blogId = res.data.blogId;
      // 2.提交博客的分类
      const setCategoryData = {
        blogId: this.blog.blogId,
        categoryId: this.blog.categoryId
      };
      const { data: res1 } = await this.$api.blog.setCategory(setCategoryData);
      console.log(res1);
      // 3.提交博客的标签
      const setTagData = {
        blogId: this.blog.blogId,
        tags: this.tagIds
      };
      const { data: res2 } = await this.$api.blog.setTags(setTagData);
      console.log(res2);
      this.dialogFormVisible = false;
      this.$message.success("发布成功");
    }
  }
};
</script>

<style scoped lang="scss">
header {
  position: sticky;
  top: 0;
  height: 60px;
  background-color: #f3f3f3;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 2000;
  .title {
    width: 100px;
    font-weight: 700;
  }

  .submitBtn {
    margin-left: 20px;
  }

  ::v-deep.submitBtn.el-button--danger {
    background-color: #dd4149;
  }
}

.el-form {
  font-size: 12px;
}

.mavon-editor {
  min-height: calc(100vh - 70px);

  ::v-deep.v-note-op {
    position: sticky;
    top: 60px;
  }
}
</style>
